<template>
  <div v-if="isLogin" class="book-shelf">
    <div v-for="item in booksData" :key="item.id">
      <BookComponent :book="item"></BookComponent>
    </div>
  </div>
  <not-login-component v-else />
</template>

<script>
import BookComponent from "@/components/BookComponent.vue";
import { getBookShelfList } from "@/api/bookshelf";
import NotLoginComponent from "@/components/NotLoginComponent.vue";
export default {
  components: { BookComponent,NotLoginComponent },
  data() {
    return {
      booksData: [
       
      ],
      isLogin: false,
    };
  },
  methods: {
    async getBooksData() {
      const res = await getBookShelfList(this.getLoginInfo);
      if (res.data.success) {
        this.booksData = res.data.result;
      }
    },
  },
    computed: {
    getLoginInfo() {
      return this.$store.state.user.userInfo.userId;
    },
  },
  created() {
    if(this.getLoginInfo){
      this.isLogin = true;
      this.getBooksData();
    }
    
  },
};
</script>

<style>
.book-shelf {
  display: flex;
}
</style>